import Vue,{VNode} from 'vue';
import 'animate.css';
/**
 * 搜索组件
 * @author 唐国雄
 * @date 2021/7/21
 * 属性----------------------
 * v-model		当前搜索的值, String
 * 插槽----------------------
 * #default		搜索框的placeholder
 * #prepend		前缀插槽
 * #append		后缀插槽
 */
export default Vue.extend({
	name:'Search',
	props:{
		//当前值
		value:{
			type:String,
			required:true,
			default:'',
		},
	},
	data(){
		return {
			//搜索页
			searchPage:false,
		};
	},
	computed:{
		classes():string{
			const {prepend,append}=this.$scopedSlots;
			return 'lexmis-Search'+
				(this.value?' lexmis--content':'')+
				(prepend?' lexmis--prepend':'')+
				(append?' lexmis--append':'');
		},
	},
	render(h):VNode{
		const {prepend,append,default:slot}=this.$scopedSlots;
		return h('div',{
			staticClass:this.classes,
		},[
			prepend
				?h('div',{
					staticClass:'lexmis_prepend'
				},prepend(undefined))
				:null,
			h('div',{
				staticClass:'lexmis_content',
			},this.value||(slot&&slot(undefined))),
			append
				?h('div',{
					staticClass:'lexmis_append'
				},append(undefined))
				:null,
			h('transition',{
			},[
				this.searchPage
					?h('div',{
						staticClass:'lexmis_search_page'
					})
					:null
			])
		]);
	}
});
